<template>
  <div class="blog-content">
    <!-- 博客内容组件 -->
    <div v-for="item in lists" class="content-item">
      <div class="title" @click="seeBlog(item.id)">
        <span class="title-time">{{ item.time }}</span>
      </div>
      <div>
        <div @click="seeBlog(item.id)">
          <span class="item-title">{{ item.title }}</span>
        </div>
        <div class="item-tags">
          <span v-for="(tag, index) in item.tagsArr" @click="toTag(tag.id)"
            >/<span class="tag-name">{{ tag.name }}</span
            >{{ `${index === item.tagsArr.length - 1 ? '/' : ''}` }}</span
          >
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'BlogTitle',
  components: {},
  data() {
    return {
      lists: [],
    }
  },
  mounted() {
    this.getTitle()
  },
  methods: {
    // 查询列表bolgtitle\(最新的10条)
    getTitle() {
       this.$axios.get('/newBlog').then((val) => {
        if (val.status === 200) {
          val.data.forEach((val) => {
            val.time = this.dayjs(val.createTime).format('YYYY-MM-DD')
          })
          this.lists = val.data
        }
      })
    },
    seeBlog(id) {
      // 调用父组件的方法
      this.$router.push({
        path: '/home/blogContent',
        query: {
          id: id,
        },
      })
      //this.$parent.showBlogContent(id)
    },
    //
    toTag(id) {
      // 通过当前的tagid跳转到指定的tag
     this.$router.push({
       name: 'blogTags',
       params: {
         id: id
       }
     })
    },
  },
}
</script>

<style scoped lang="less">
.blog-content {
  font-size: 18px;
  .title-time {
    margin-right: 20px;
  }
  .content-item {
    display: flex;
    margin-bottom: 20px;
    cursor: pointer;
  }
  .item-title {
    color: #000;
  }
  .item-tags {
    font-size: 14px;
  }
  .tag-name:hover {
    color: #000;
  }
}
</style>
